<!-- 边框 -->
<template>
    <si-border
        v-model:borderStyle="widget.widgetData.eles.style['border-style']"
        :borderWidth="parseInt(widget.widgetData.eles.style['border-width'])"
        @update:borderWidth="val => widget.widgetData.eles.style['border-width'] = `${val}px`"
        v-model:borderColor="widget.widgetData.eles.style['border-color']"
    />
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import { SiBorder } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'RowBorder',
    components: {
        SiBorder
    },
    props: {
        widget: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { widget } = toRefs(props)

        const widgetType = computed(() => widget.value?.widgetData?.eles?.type)

        return {
            widget,
            widgetType
        }
    }
})
</script>